<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>天地图</title>
    <script type="text/javascript"
            src="https://api.tianditu.gov.cn/api?v=4.0&tk=ddccf475fe4b959f1a51f2ddfd6f806a"></script>
</head>
<style>
    html, body, #mapDiv {
       width: 100%;
       height: 100%;
       margin: 0;
       padding: 0;
   }
      .marker-content {
        padding: 8px;
        max-width: 300px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }
    .marker-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px;
        color: #2A2A2A;
        border-bottom: 1px solid #fff;
        padding-bottom: 5px;
    }
    .info-item {
        margin: 6px 0;
        font-size: 14px;
        color: #2A2A2A;
        display: flex;
    }
    .info-label {
        color: #2A2A2A;
        min-width: 70px;
        margin-right: 8px;
    }
    .info-value {
        color: #2A2A2A;
        flex: 1;
    }
</style>
<body>
<div id="mapDiv"></div>
<script>
    let map;
    let polygon;
    let markers = {};

    function initMap(long, lat) {
    console.log(long,lat);
        map = new T.Map('mapDiv');
        map.centerAndZoom(new T.LngLat(long, lat), 10);
    }

    function drawFence(points) {
        // 如果已存在围栏，先清除
        if (polygon) {
            map.removeOverLay(polygon);
        }

       // 创建坐标点数组
        const line = points.map(point => new T.LngLat(point.lng, point.lat));


        // 创建多边形对象
        polygon = new T.Polygon(line, {
            color: "#2A3764",
            weight: 3,
            opacity: 0.5,
            fillColor: "#FFFFFF",
            fillOpacity: 0.5
        });

        // 向地图上添加面
        map.addOverLay(polygon);

       // 自动调整视野以显示整个围栏
        const bounds = polygon.getBounds();
        map.setViewport(bounds);

        // 添加点击事件
        polygon.addEventListener("click", function(e) {
            Android.onFenceClick(fenceId);
        });
    }


    function addMarkers(markersData) {
    console.log(JSON.stringify(markersData));
    // 清除现有标注
    clearMarkers();

    // 计算边界以自动调整地图视野
    let bounds = new T.LngLatBounds();

    markersData.forEach(data => {
        const position = new T.LngLat(data.lon, data.lat);
        bounds.extend(position);

        // 创建标注
        let marker;
        if (data.icon) {
            // 使用自定义图标
            const icon = new T.Icon({
                iconUrl: data.icon,
                iconSize: new T.Point(32, 32),
                iconAnchor: new T.Point(16, 32)
            });
            marker = new T.Marker(position, {icon: icon});
        } else {
            // 使用默认图标
            marker = new T.Marker(position);
        }

        // 创建信息窗口内容
        const content = createInfoWindowContent(data);

        // 创建信息窗口
        const infoWindow = new T.InfoWindow(content, {
            offset: new T.Point(0, -27),
            autoPan: true,
            closeButton: true,
            minWidth: 280,
            maxWidth: 300
        });

        // 添加点击事件
        marker.addEventListener('click', function(e) {
            // 通知Android
            Android.onMarkerClick(data.id, data.title);

            map.openInfoWindow(infoWindow, position);
        });

        // 将标注添加到地图
        map.addOverLay(marker);

        // 保存标注引用
        markers[data.id] = {
            marker: marker,
            infoWindow: infoWindow
        };
    });

    // 调整地图视野以显示所有标注
    if (Object.keys(markers).length > 0) {
        map.setViewport(bounds);
    }
}

 function createInfoWindowContent(data) {
    return `
        <div class="marker-content">
            <div class="marker-title">${data.name}</div>
            <div class="info-item">
                <span class="info-label">河道:</span>
                <span class="info-value">${data.river_channel || '暂无数据'}</span>
            </div>
            <div class="info-item">
                <span class="info-label">镇街:</span>
                <span class="info-value">${data.town_street || '暂无数据'}</span>
            </div>
            <div class="info-item">
                <span class="info-label">水质类型:</span>
                <span class="info-value">${data.water_target || '暂无数据'}</span>
            </div>
            <div class="info-item">
                <span class="info-label">详细地址:</span>
                <span class="info-value">${data.detail_address || '暂无数据'}</span>
            </div>
        </div>
    `;
}

function clearMarkers() {
    Object.values(markers).forEach(({marker}) => {
        map.removeOverLay(marker);
    });
    markers = {};
    markers = {};

    // 关闭信息窗口
    map.closeInfoWindow();
}

// 更新特定标注的位置
function updateMarkerPosition(markerId, latitude, longitude) {
    const marker = markers[markerId];
    if (marker) {
        const position = new T.LngLat(longitude, latitude);
        marker.setLngLat(position);
    }
}

// 显示/隐藏特定标注
function toggleMarker(markerId, visible) {
    const marker = markers[markerId];
    if (marker) {
        if (visible) {
            map.addOverLay(marker);
        } else {
            map.removeOverLay(marker);
        }
    }
}


    // 初始化地图
    initMap();
</script>
</body>
</html>